<template>
  <div class="dashboard-container" id="mainPage">
    <sticky className="sub-navbar">
      <div class="top-bar">
        <div class="wraper relative">
          <el-select clearable style="width: auto" class="filter-item" v-model="queryType">
              <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
          </el-select>
          <my-order-btn v-if="isLogin"></my-order-btn>
          <div class="left-bar">
          <div class="title">{{$t('leftBar.title')}}</div>
            <el-tree
              :indent="indent"
              :data="typeList"
              :props="defaultProps"
              ref="leftTypes"
              node-key="id"
              @node-click="chooseType"
              highlight-current
              :accordion="true"
              >
            </el-tree>
          </div>
        </div>
      </div>

    </sticky>
    <div class="wraper relative">
      
      <div class="content">
        <div class="clearfix" v-for="arr in prdListShow">
          <div class="item-prd" style="float:left;" v-for="item in arr">
            <product-item :data="item"></product-item>
          </div>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-size="listQuery.size" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
      </div>
      <back-to-top></back-to-top>
    </div>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import MyOrderBtn from '@/components/MyOrderBtn'
import productItem from './product/component/productItem.vue';
import { fetchTypes, fetchPrdList, fetchMyPrdList } from '@/api/c'
import BackToTop from '@/components/BackToTop'
import { mapGetters } from 'vuex'
function split_array(arr, len){    var a_len = arr.length;    var result = [];    for(var i=0;i<a_len;i+=len){        result.push(arr.slice(i,i+len));    }    return result;}
export default {
  name: 'dashboard',
  components: { Sticky, MyOrderBtn, productItem, BackToTop },
  data() {
    return {
      indent: 0,
      number: 5,
      queryType: 'all',
      queryTypeOptions: [{key: 'all', label: this.$t('index.filter.all')}, {key: 'myPrd', label: this.$t('index.filter.my')}],
      typeList: [], //品类列表
      total: null,
      listQuery: {
        productTypeId: 0,
        page: 1,
        size: 20
      },
      prdList: [], //产品列表
      prdListShow: [], //显示的产品列表
      defaultProps: {
        children: 'subTypes',
        label: 'name'
      }
    }
  },
  watch: {
    prdList: function(val) {
      this.prdListShow = split_array(val, 4);
    },
    queryType: function (val) {
      if (this.queryType == 'all') {
        this.listQuery.productTypeId = 0;
      } else {
        if (!this.isLogin) {
          window.location.replace((window.location.pathname.startsWith('/test') ? '/test' : '') +'/#/member/login?cbPath='+router.history.current.path)
        }
      }
      this.autoGetList()
    }
  },
  computed: {
    ...mapGetters([
      'isLogin'
    ])
  },
   methods: {
    chooseType(ele) {
      this.listQuery.productTypeId = ele.id
      //父类不执行查询 
      if (ele.subTypes || ele.subTypes.length == 0) {
        this.autoGetList()
      }
    },
    handleNodeClick(data) {
      console.log(data);
    },
    getTypes() {
        fetchTypes().then(response => {
            this.typeList = response.data.list
            this.$nextTick(() => {
              // this.$refs.leftTypes.setCurrentKey(1);
              // $('#mainPage .content').css({paddingLeft: ($('#mainPage .left-bar').outerWidth() + 30) +'px'})
              // $('.top-bar .el-select').css({marginLeft: ($('#mainPage .left-bar').outerWidth() + 30) +'px'})
            })
        })
    },
    autoGetList() {
      if (this.queryType == 'myPrd') {
        this.getMyList()
      } else {
        this.getList()
      }
    },
    //获取全部
    getList() {
      fetchPrdList(this.listQuery).then(response => {
          this.prdList = response.data.list
          this.total = response.data.total
      })
    },
    getMyList() {
      fetchMyPrdList(this.listQuery).then(response => {
          this.prdList = response.data.list
          this.total = response.data.total
      })
    },
    handleSizeChange(val) {
        this.listQuery.size = val
        this.autoGetList()
    },
    handleCurrentChange(val) {
        this.listQuery.page = val
        this.autoGetList()
    }
  },
  created() {
    this.getTypes();
    this.autoGetList();
  },
  mounted() {
    
  }
}
</script>

<style  scoped>
.wraper {
  width: 1200px;
}
.top-bar {
  background: #3E3E58;
  /*height: 88px;
  line-height: 88px;*/
  padding: 22px 0 18px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.left-bar {
  width: 250px;
  border-radius: 4px;
  box-shadow: 0 16px 34px 7px rgba(121,121,121,0.1);
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  padding: 27px 20px;
  z-index: 3;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.left-bar .title {
  font-size: 13px;
  color: #000000;
  margin-bottom: 15px;
}
.top-bar .el-select {
  margin-left: 285px;
}

.content {
  padding: 24px 0 50px 285px;
  width: 1140px;
  min-height: 400px;
}

.content .el-col-6 {
  margin-bottom: 24px;
}
.pagination-container {
  margin: 20px 0;
}
.item-prd {
  width: 23%;
  margin-right: 2%;
  margin-bottom: 2%; 
}
</style>
<style type="text/css">
.dashboard-container .el-select .el-input__inner {
  background: url('../../assets/index-icon.png') #ffffff no-repeat center;
  background-size: 7%;
  background-position: 28px center;
  padding-left: 55px;
}
/*.left-bar .el-icon-caret-right:before {*/
  /*content: '' !important;*/
/*}*/
.left-bar .el-tree-node__content {
  line-height: 30px;
  height:30px;
  /*color: #171717;*/
}
.left-bar .el-tree-node__children .el-tree-node__label {
  font-size: 11px;
  height: 31px;
  line-height: 31px;
  color: #7B7B7B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.left-bar .el-tree-node__children .el-tree-node .el-tree-node__content {
  margin-bottom: 0;
}
.left-bar .el-tree-node>.el-tree-node__children {
  margin-bottom: 10px;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: #ffffff;
  color: #3DBDB6;
  font-weight: bold;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content span {
  color: #3DBDB6 !important;
  font-weight: normal;
}
</style>
